<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<!-- affiliate-data=myAffiliateData, app-argument=myURL -->
	<!-- <meta name="apple-itunes-app" content="app-id=436590129"> -->
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width">

	<meta property="og:image" content="http://weavesilk.com/img/silk_thumb.png" />
	<link rel="image_src" type="image/png" href="img/silk_thumb.png" />

	<meta property="og:description" content="Create beautiful flowing art with Silk." />

	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/font-awesome.css" />
	<link rel="stylesheet" href="css/ss-social.css" />
	<link rel="stylesheet" href="css/site.css" />

	<script src="js/jquery-1.8.1.min.js"></script>
	<script src="js/jquery.fullscreen.js"></script>
	<script src="js/underscore.min.js"></script>
	<script src="js/knockout-2.2.0.min.js"></script>
	<script src="js/d3.v3.min.js"></script>
	<script src="js/keymaster.js"></script>
	<script src="js/noise.js"></script>
	<script src="js/detect.js"></script>
	<script src="js/site.js"></script>
	<style>
		.email-me {
			display: none;
		}

		body.iphone .email-me {
			display: block;
			z-index: 10000;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			color: white;
			padding: 0.5em 0;
			text-decoration: none;
			color: #6A6378;
		}

		body.iphone .email-me:hover {
			color: #fff;
			text-decoration: underline;
		}
	</style>
	<title>Silk &ndash; Interactive Generative Art</title>
</head>

<body
	data-bind="css: { 'iphone': isIPhone, 'right-side-up': isRightSideUp, 'silk-active': silkActive, 'mouse-over-previewable-controls': mouseOverControls, 'mouse-down-on-slider': mouseDownOnSlider }">
	<!-- https://itunes.apple.com/us/app/id436590129?mt=8&ls=1 -->
	<!-- http://goo.gl/urr6sT-->

	<div id="canvii-container">

		<div id="main-controls" class="controls-container">
			<div class="row btn-row share-btn-row">
				<div class="btn" id="btn-new" data-bind="click: clear, css: { visible: notPristine }">
					<span class="text">New</span>
				</div>

				<!--
				<div id="share-wrap">
					<div class="btn" id="btn-share"
						data-bind="click: shareButtonClick, css: { visible: showShareButton, disabled: shareDisabled, loading: shareLoading, 'hide': showShareOptions }">
						<div class="text">Share</div>
						<div class="loading-stripes"></div>
					</div>

					<div id="share-options" data-bind="css: { 'show-share-options': showShareOptions }">
						<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlFacebook }">
							<span class="text"><i class="ss-facebook"></i></span>
							<div class="tt">Facebook</div>
						</a>

						<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlTwitter }">
							<span class="text"><i class="ss-twitter"></i></span>
							<div class="tt">Twitter</div>
						</a>

						<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlPinterest }">
							<span class="text"><i class="ss-pinterest"></i></span>
							<div class="tt">Pinterest</div>
						</a>

						<a class="visible btn mini" target="_blank" data-bind="attr: { href: shareUrlEmail }">
							<span class="text"><i class="ss-mail"></i></span>
							<div class="tt">Email</div>
						</a>

						<input class="visible direct-link" data-bind="value: shareUrlDirect, text: shareUrlDirect" />
					</div>
				</div>
				-->
			</div>

			<div class="row">
				<div class="btn silk-icon" data-bind="click: toggleFullscreen, css: { visible: notPristine }">
					<div class="contents"><i class="icon-fullscreen"></i></div>
					<div class="tt" data-bind="visible: isFullscreen">Fullscreen</div>
					<div class="tt" data-bind="visible: isNotFullscreen">Fullscreen</div>
				</div>

				<div class="btn silk-icon" data-bind="click: download, css: { visible: notPristine }">
					<div class="contents"><i class="icon-camera"></i></div>
					<div class="tt">Save Picture</div>
				</div>

				<div class="btn silk-icon" id="selected-color-icon"
					data-bind="click: toggleAllControls, css: { visible: notPristine }">
					<div class="contents"><i class="icon-circle"></i></div>
					<div class="tt">Controls</div>
				</div>

				<div class="btn silk-icon"
					data-bind="click: undo, css: { visible: notPristine, 'flip-icon': nextUndoIsRedo }">
					<div class="contents"><i class="icon-undo"></i></div>
					<div class="tt" data-bind="visible: nextUndoIsNotRedo">Undo</div>
					<div class="tt" data-bind="visible: nextUndoIsRedo">Redo</div>
				</div>
			</div>

			<div class="row controls-row download-row" data-bind="css: { visible: showDownload }">
				<p class="instructions">To save, right click the thumbnail and choose <em>Save Image As...</em>.</p>
				<img id="download-image" />
			</div>

			<div class="row controls-row color-and-symmetry-row" data-bind="css: { visible: showColorPicker }">
				<svg id="colorpicker">

				</svg>
				<div class="label" style="text-align: center;">Drag colors to blend.</div>

				<div id="symmetry-controls">
					<div class="one-d slider control" id="sym-num-rotations">
						<div class="slider-bg">
							<div class="ticks">
								<div class="tick one"></div>
								<div class="tick two"></div>
								<div class="tick three"></div>
								<div class="tick four"></div>
								<div class="tick five"></div>
								<div class="tick six"></div>
							</div>
							<div class="slider-bg-pc"></div>
						</div>
						<div class="handle"></div>
						<div class="ghost-handle"></div>
					</div>

					<div id="sym-num-rotations-label" class="label"></div>

					<div class="toggle control" id="toggle-mirror" data-bind="click: toggleMirror, css: { on: mirror }">
						<div class="description">Mirror across center</div>
						<div class="state"><span class="state-on">On</span><span class="state-off">Off</span></div>
					</div>

					<div class="toggle control" id="toggle-spiral" data-bind="click: toggleSpiral, css: { on: spiral }">
						<div class="description">Spiral towards center</div>
						<div class="state"><span class="state-on">On</span><span class="state-off">Off</span></div>
					</div>

				</div>
			</div>
		</div>


		<canvas id="silk-1" class="silk-canvas active"></canvas>
		<canvas id="silk-2" class="silk-canvas buffer"></canvas>
		<canvas id="sparks"></canvas>

	</div>

	<div id="replay-thumbnail" data-bind="css: { visible: showingReplayThumbnail }, click: hideReplayThumbnail ">
		<img data-bind="attr: { src: shareUrlThumbnail }" width="150" />
		<div class="tt">Hide thumbnail</div>
	</div>
	<!-- https://itunes.apple.com/us/app/id436590129?mt=8&ls=1 -->

	<div id="intro-center" data-bind="css: { visible: showIntro }">
		<img class="logo" src="img/silk_text.png" width="250" height="250" />
	</div>

	<div id="intro-draw-something" data-bind="css: { visible: showIntro }">
		<!-- <div id="instructions">Draw something.</div> -->
		<img class="draw-something" src="img/draw_something.png" width="250" height="29" />
	</div>
	
	<!--
	<div id="intro-mute-option" data-bind="css: { visible: false }">
		<em>Note</em> &mdash; Silk has sound.
		<a href="index.html#" data-bind="visible: muted, click: toggleMute">Muted</a><span data-bind="visible: muted">.</span>
		<a href="index.html#" data-bind="visible: notMuted, click: toggleMute">Mute?</a>
	</div>
	-->

	<div id="tips">
		<div class="tip">Press <b>Space</b> to start anew.</div>
		<div class="tip">Press <b>Z</b> to undo.</div>

		<!-- <div class="tip"><i class="icon-undo"></i> lets you travel back in time.</div> -->
		<!-- <div class="tip"><i class="icon-circle"></i> unlocks colors and symmetries.</div> -->

		<div class="magic tip">Try different colors and symmetries.</div>
		<div class="tip">Sally forth, you weaver of wonder, sower of silken waves.</div>
	</div>

	<!--
	<audio id="bg-music" preload="auto" loop="true" >
		<source src="http://yurivish.com/Silk%20Static/Silkura%20-May%2002%20-loop.m4a" type='audio/mp4; codecs="mp4a.40.5"'/>
		<source src="http://yurivish.com/Silk%20Static/Silkura%20-May%2002%20-loop.ogg" type='audio/ogg; codecs="vorbis'/>
	</audio>

	<audio id="bg-music-intro" preload="auto">
		<source src="http://yurivish.com/Silk%20Static/Startup%201%2016-44.m4a" type='audio/mp4; codecs="mp4a.40.5"'/>
		<source src="http://yurivish.com/Silk%20Static/Startup%201%2016-44.ogg" type='audio/ogg; codecs="vorbis'/>
	</audio>
	-->
</body>

</html>